//引入当前样式
require('./sportdata.less')

//引入字体图标
require('../../libs/fonts/iconfont.css')

//引入可视化图
const echarts=require('echarts')


//引入加载事件
const {$,g,ga}=require('../../utlis/dom')

const axios=require('../../utlis/axios')

$(function(){
    /**
     * 点击回到上一个页面
     */
    g('.return').addEventListener('click',function(){
        // console.log(1);
        history.back()
    })

    /**
     * 渲染个人信息数据
     */
    axios.get('/api/user/info').then(function(res){
        if(res.data.errno === 0){
            let data=res.data.data
            // console.log(data);
            g('#img').src=data.imgUrl;
            g('#addday').textContent=data.clockCount
        }
    })

    /**
     * 渲染运动数据
     */
     axios.get('/api/exercise').then(function(res){
        if(res.data.errno === 0){
            let data=res.data.data
            // console.log(data);
            g('#sport').textContent=(data.sum7Duration/60).toFixed()
            g('#cll').textContent=data.sum7Calorie
            g('#m').textContent=data.sum7Meter
            g('#goon').textContent=data.days.length  

            let dateArr=data.days.map(function(v){
                return v.date.substring(5)
            })
            // console.log(dateArr);
            let sumArr=data.days.map(function(v){
                return v.sumDuration
            })
            // console.log(sumArr);

            //调用柱状图
            zhuzhuangtu(dateArr,sumArr)

            let obj={
                '跑步':0,
                '骑行':0,
                '训练':0
            }
            data.days.forEach(function(v){
                // console.log(v.exerciseData);
                v.exerciseData.forEach(function(v1){
                    if(v1.type === 0){
                        obj['跑步']+=v1.duration
                    }else if(v1.type === 1){
                        obj['骑行']+=v1.duration
                    }else{
                        obj['训练']+=v1.duration
                    }
                })
            });
            // console.log(obj);
            let objarr=[]
            for(const key in obj){
                objarr.push({
                    value: obj[key],
                    name: key
                })
            }
            // console.log(objarr);
            //调用饼图
            bingtu(objarr)

                //堆叠图
            threePic(dateArr, sumArr)


            //折线图
            fourPic(dateArr, sumArr)

        }
    })

    /**
     * 柱状图
     */
    function zhuzhuangtu(a,b){
    // 基于准备好的dom，初始化echarts实例
    const myChart1 = echarts.init(g('#main1'));
    // 配置参数
    myChart1.setOption({
        //标题
        title: {
            text: '近7天运动时长',
            left: 10,
            top: 10
        },

        grid: {
            show: true,
            top: '18%',
            right: '4%',
            bottom: '8%',
            left: '12%'
        },

        //x轴
        xAxis: {
            type: 'category',
            data: a
        },

        //y轴
        yAxis: {
            type: 'value'
        },

        //数据集群/数据系列
        series: [
            {
                data: b,
                type: 'bar'
            }
        ]
    });
    }


    /**
     * 饼状图
     */

     function bingtu(a){
        const myChart1 = echarts.init(g('#main2'));

     myChart1.setOption( {
        title: {
          text: '运动分类',
          left: '15px'
        },
        legend: {
          orient: 'vertical',
          left: '18px',
          top:'middle'
        },
        series: [
          {
            name: '运动分类',
            type: 'pie',
            radius: '50%',
            label: {
                position: 'inner',
                fontSize: 12,
                formatter: '{d}%'
            },
            data: a,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
     }
    
    
     //叠图
function threePic(x, y) {
  let myChart = echarts.init(main3)
  // 绘制图表
  myChart.setOption({
      title: {
          text: '近7天运动分类'
      },
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
      },
      legend: {
          orient: 'vertical',
          top: 'middle',
          right: 'right'
      },
      grid: {
          left: '3%',
          right: 50,
          bottom: 4,
          x: -50,
          y: 40,
          containLabel: true
      },
      xAxis: {
          type: 'value'
      },
      yAxis: {
          type: 'category',
          data: x
      },
      series: [
          {
              name: '跑步',
              type: 'bar',
              stack: 'total',
              label: {
                  show: false
              },
              emphasis: {
                  focus: 'series'
              },
              data: y
          },
          {
              name: '骑行',
              type: 'bar',
              stack: 'total',
              label: {
                  show: false
              },
              emphasis: {
                  focus: 'series'
              },
              data: y
          },
          {
              name: '课程',
              type: 'bar',
              stack: 'total',
              label: {
                  show: false
              },
              emphasis: {
                  focus: 'series'
              },
              data: y
          }
      ]
  })

}

//折线图
function fourPic(x, y) {
  let myChart = echarts.init(main4)
  // 绘制图表
  myChart.setOption({
      grid: {
          right: -8,
          bottom: 20,
          x: 40,
      },
      title: {
          text: '近7日训练次数'
      },
      xAxis: {
          type: 'category',
          data: x
      },
      yAxis: {
          type: 'value'
      },
      series: [
          {
              data:y,
              type: 'line'
          }
      ]
  })
}

})